<!DOCTYPE html>
<html>
<head>
	<title>表单</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="table.css">
</head>
<body>
<table border="1">
	<thead>
		<tr class="header">
			<th colspan="5" class="tableheader">采购清单</th>
		</tr>
		<tr>
			<th>序号</th>
			<th>商品名称</th>
			<th>单价</th>
			<th>数量</th>
			<th>操作</th>
		</tr>
	</thead>

	<tbody>
		<tr>
			<td>1</td>		
			<td>草莓</td>
			<td>6.5</td>
			<td>1</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>
		<tr>
			<td>2</td>		
			<td>芒果</td>
			<td>3.5</td>
			<td>1</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>
		<tr>
			<td>3</td>		
			<td>荔枝</td>
			<td>6.5</td>
			<td>1</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>
		<tr>
			<td>4</td>		
			<td>苹果</td>
			<td>4.5</td>
			<td>1</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>
		<tr>
			<td>5</td>		
			<td>樱桃</td>
			<td>25</td>
			<td>1</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>
		<tr>
			<td>6</td>		
			<td>蓝莓</td>
			<td>23</td>
			<td>1</td>
			<td>
				<button class="delItem">删除</button>
				<button class="addItem">添加</button>
			</td>
		</tr>
		<tr class="footer">
			<th colspan="5">
				<p>汇总</p>
			</th>
		</tr>
	</tbody>
</table>
<div class="shade" style="display: none;">
	 <div class="form-panel">
	 	<h5 class="form-header">请输入表单信息</h5>
	 	<div class="form-inner">
	 		<input type="text" name="goods" value="" placeholder="请输入商品名称"></br>
	 		<input type="text" name="price" value="" placeholder="请输入商品单价"></br>
	 		<input type="text" name="num" value="" placeholder="请输入商品数量"></br>
	 		<div class="options">
	 			<button class="confirmbtn" style="background-color: #81ea6b;">添加</button>
	 			<button class="canclebtn" style="background-color: #81f16b;">取消</button>
	 		</div>
	 	</div>
	 	<div class="close">
	 		<em></em>
	 	</div>
	 </div>
</div>

<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
// window.onload=function(){

	$('tbody tr:odd').addClass('even');
	$('tbody tr:even').css('background-color','#d1fbc9')



	// $('.close').on('click',function(e){
	// 	$('.shade').css('display','none');

	// })
	// $('.close1').on('click',function(e){
	// 	$('.shade').css('display','none')
	// })	
	// $('.addItem').on('click',function(e){
	// 	$('.shade').css('display','block')
	// })	

	// 点击弹框中的关闭事件
	$('.close').click(function(){
		$('.shade').hide();
		$('input[name=goods]').val('');
		$('input[name=price]').val('');
		$('input[name=num]').val('');
	})
	
	// 点击弹框中的取消事件
	$('.canclebtn').click(function(){
		$('.shade').hide();
		$('input[name=goods]').val('');
		$('input[name=price]').val('');
		$('input[name=num]').val('');
	})

	// 点击添加事件
	$('.addItem').click(function(){
			$('.shade').show();
		})

	// 点击弹框中的添加事件
	var showForm = function(){
		$('.shade').show();
	}

	$('.confirmbtn').click(function(){
		$('.shade').hide();
		// 现获取tbody中的行数
		var ntr =$('tbody tr').length;
		var sn =$('tbody tr:eq(' +(ntr-2)+')').find('td:first').text();
		console.log('sn===',sn)

		var name = $('input[name=goods]').val();
		var price = $('input[name=price]').val();
		var num = $('input[name=num]').val();
		var tr = '<tr><td>'+(sn*1+1)+'</td><td>'+name+'</td><td>'+price+'</td><td>'+num+'</td><td><button>删除</button> <button onclick="showForm()">添加</button></td></tr>';
		$('tbody tr:eq('+(sn-1)+')').after(tr)
	})

	// 点击删除事件

	var removeForm = function(){
		$('.shade').show();
	}

	$('.delItem').click(function(){
		// $(this)
		$(this).parent().parent().remove();
		var abn = '<button onclick="removeForm()>删除</button>'
		

	})


// }
</script>

</body>
</html>